<script setup lang='ts'>
import type { Component } from 'vue'

interface IComponentsList {
  [t: string]: Component
}

defineOptions({ name: 'AppSportsHomePage' })

const sportsNotify = new SportsNotify(socketClient)
const sportsStore = useSportsStore()
const { isShowAllSportsList } = storeToRefs(sportsStore)
const { mqttIsConnected } = storeToRefs(useAppStore())
const route = useRoute()
const { headerHeight } = storeToRefs(useWindowStore())
/** 定时更新count */
const {
  startTimer: startCount,
  stopTimer: stopCount,
} = useSportsDataUpdate(sportsStore.runSportsCount, 60)

const initDataLoading = ref(true)

const currentPage = computed(() => {
  const _path = route.query['bt-path']?.toString().replace('/', '') ?? ''
  return _path === '' ? 'home' : _path
})

// 动态导入各个子页面
const componentList: IComponentsList = {
  home: defineAsyncComponent(() => import('./_components/home.vue')),
  'event-builder': defineAsyncComponent(() => import('./_components/event-builder.vue')),
  'bets-feed': defineAsyncComponent(() => import('./_components/bets-feed.vue')),
  live: defineAsyncComponent(() => import('./_components/live.vue')),
  favorites: defineAsyncComponent(() => import('./_components/fav.vue')),
  bets: defineAsyncComponent(() => import('./_components/bets.vue')),
  sport: defineAsyncComponent(() => import('./_components/sport.vue')),
  search: defineAsyncComponent(() => import('./_components/search.vue')),
}

const currentComponent = computed(() => componentList[currentPage.value])
const isShowPagesTab = computed(() => ['home', 'event-builder', 'bets-feed'].includes(currentPage.value))

function suspenseResolved() {
  initDataLoading.value = false
}

// 监听mqttIsConnected
watch(() => mqttIsConnected.value, (newMqttIsConnected) => {
  if (newMqttIsConnected) {
    if (!sportsNotify.isSubscribed)
      sportsNotify.subscribe()
  }
}, { immediate: true })

onMounted(() => {
  startCount()
})
onBeforeUnmount(() => {
  stopCount()
  if (sportsNotify.isSubscribed)
    sportsNotify.unsubscribe()
})
</script>

<template>
  <div class="w-full h-full relative flex flex-col" :style="{ minHeight: `calc(100vh - ${headerHeight + 'px'})` }">
    <transition name="loading-scale-out">
      <AppSportsLoading v-if="initDataLoading" />
    </transition>

    <!-- 页面导航 -->
    <AppSportsHomeNavs :current-page="currentPage" />
    <!-- 首页的页面导航 -->
    <div v-if="isShowPagesTab" class="mt-[16px] mx-[8px]">
      <AppSportsPagesTab :current-page="currentPage" />
    </div>
    <!-- 所有球种列表 -->
    <AppSportsAllSportsList v-if="isShowAllSportsList" />
    <!-- 页面 -->
    <div class="content">
      <keep-alive :max="50">
        <Suspense timeout="0" @resolve="suspenseResolved">
          <component :is="currentComponent" />
          <template #fallback>
            <div class="w-full h-full flex items-center justify-center z-[101] absolute bg-[var(--color-bg-black-2)]">
              <BaseLoading class="w-[44px] h-[44px] mb-[8px]" />
            </div>
          </template>
        </Suspense>
      </keep-alive>
      <AppSportsFooter v-if="!initDataLoading" />
    </div>

    <!-- 投注单组件 -->
    <AppSportsBetSlipCenter v-if="!initDataLoading" />
  </div>
</template>

<style lang='scss' scoped>
.content {
  padding: 16px 8px;
  min-height: calc(100vh - 128px);
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.loading-scale-out-enter-active,
.loading-scale-out-leave-active {
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s;
  transform-origin: center center;
}

.loading-scale-out-enter-from,
.loading-scale-out-leave-to {
  transform: scale(0);
  opacity: 0;
}
</style>
